<template>
  <Transition name="fadeIn" appear>
    <div class="black" v-show="props.showBlack" ref="black">
      <slot></slot>
    </div>
  </Transition>
</template>
<script lang="ts" setup>
import { ref, onMounted, defineProps } from 'vue'
const black = ref<HTMLDivElement | null>(null)
const props = defineProps({
  showBlack: {
    type: Boolean,
    default: false
  }
})
onMounted(() => {})
</script>
<style scoped lang="scss">
@import url('../css/comment/animate.css');
.black {
  overflow: scroll;
  width: 100%;
  // height: calc(100vh - 50px);
  height: 100%;
  position: absolute;
  z-index: 9999;
  background-color: #3339;
  top: 0px;
  left: 0px;
}
</style>
